<template>
  <div class="main-body">
    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.title" placeholder='标题'></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            icon="search"
            type="primary"
            @click="doSearch"
            :disabled="$hasBP('bnt.sysOperLog.list')  === false"
          >查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  :disabled="$hasBP('bnt.sysOperLog.list')  === false" @click="refreshForm" icon="refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--表格内容栏-->
    <cm-table
      ref="tableRef"
      :get-page="listPage"
      :filters="filters"
      :columns="columns"
      :showOperation="false"
      :showBatchDelete="false"
    ></cm-table>
  </div>
</template>

<script setup>
import { listPage } from '@/apis/logs-operation'
import useTableHandlers from '@/apis/use-table-handlers'
const filters = reactive({
  title: ''
});
const {
  tableRef,
  doSearch,
} = useTableHandlers();
const columns = computed(() => [
  { prop: "title", label: '标题', minWidth: 100 },
  { prop: "method", label: '方法', minWidth: 100 },
  { prop: "requestMethod", label: '请求方式', minWidth: 100 },
  { prop: "operUrl", label: '操作Url', minWidth: 100 },
  { prop: "operName", label: '操作人', minWidth: 100 },
  { prop: "operIp", label: 'IP', minWidth: 120 },
  { prop: "operTime", label: '操作时间', minWidth: 120 }
])
function refreshForm(){
  filters.title = ''
  doSearch()
}
</script>
